<template>
  <div>
    <div>
      <el-button size="mini" @click="newly">{{ $t('btn.newHang') }}<!--新增行--></el-button>
    </div>
    <jc-table
      :table-data="tableBankData"
      table-height="46vh"
      serial
      :table-header="tableHeader"
    >
      <el-table-column :label="$t('market.country2')" prop="fcountry" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fcountry"
            class="input-width"
            size="mini"
            :disabled="formDisabled"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('market.bankcode')" prop="fbankcode" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fbankcode"
            class="input-width"
            size="mini"
            :disabled="formDisabled"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('market.currency2')" prop="fcurrencyId" align="center">
        <template slot-scope="scope">
          <el-autocomplete
            v-model.trim="scope.row.fcurrency"
            highlight-first-item
            popper-class="my-autocomplete"
            :fetch-suggestions="querySearch5"
            size="mini"
            :disabled="formDisabled"
            :popper-append-to-body="false"
            @focus="queryTBdCurrency(scope.$index)"
            @select="currencyData"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="popupCurr(scope.$index)"
            />
            <template slot-scope="{ item }">
              <div class="name">{{ item.fname }}</div>
            </template>
          </el-autocomplete>
        </template>
      </el-table-column>
      <el-table-column :label="$t('market.accountname')" prop="faccountName" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.faccountName"
            class="input-width"
            size="mini"
            :disabled="formDisabled"
          />
        </template>
      </el-table-column>
      <template v-slot:btnSlot="clo">
        <el-button
          type="danger"
          size="mini"
          :disabled="formDisabled"
          @click="handleDelete(clo.scope.$index)"
        >
          {{ $t('btn.del') }}
        </el-button>
      </template>
    </jc-table>
    <!--结算币别列表-->
    <currency v-if="currencyVisiblit" @currency="currencyData" />
  </div>
</template>

<script>
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'

export default {
  name: 'Index',
  components: {
    currency: () => import('@/views/market/marketManage/createMarkerOrder/components/currency')
  },
  mixins: [autocomplete],
  props: {
    tableBankData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    formDisabled: {
      type: Boolean,
      default: false
    },
    isIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      ftype: 2052,
      fbillNo: 'fname', // 名称
      tableHeader: [
        { label: this.$t('market.handle'), type: 'btn', minWidth: '100px' }
      ],
      total: 0, // 总条目
      currencyVisiblit: false, // 币别
      tableIndex: 0 // 表格id
    }
  },
  methods: {
    popupCurr(index) {
      this.tableIndex = index
      this.currencyVisiblit = true
    },
    // 获取结算币别数据(子传父)
    currencyData(item) {
      if (item.fsettleCurrId || item.fcurrencyId) {
        this.tableBankData[this.tableIndex].fcurrencyId = item.fsettleCurrId || item.fcurrencyId
        this.tableBankData[this.tableIndex].fcurrency = item.fsettleCurrIdName || item.fname
      }
      this.currencyVisiblit = false
    },
    // 新增行
    newly() {
      this.tableBankData.push({
        fcountry: '', // 开户行国家
        fbankcode: '', // 银行账号
        fcurrencyId: '', // 币别id
        fcurrency: '', // 币别
        faccountName: '' // 账户名称
      })
    },
    handleDelete(index) {
      if (index === 0) {
        this.$message.warning('不能删除首行数据')
        return
      }
      this.tableBankData.splice(index, 1)
      this.$message.success('删除行成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.input-width {
  width: 185px;
}
.el-icon-search {
  cursor: pointer;
}
.public-form {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-bottom: 20px;
  position: relative;
  .search-btn {
    transform: translateY(18%);
    margin-left: 450px !important;
    z-index: 999;
  }
}
.dialog-class ::v-deep .el-dialog__body {
  padding: 10px 20px;
}
</style>
